onload = function(){
    let kuang = document.querySelector('.kuang');
    let lis = kuang.querySelectorAll('li');
    let texts = kuang.querySelectorAll('li>div');
    let spans = kuang.querySelectorAll('li>span');
    xianshi();
    lis.forEach(function(value,index){
        value.addEventListener('mouseover',function(){
            texts[index].style.display = 'block';
            spans[index].style.backgroundPositionX = '-50px'
        })
        value.addEventListener('mouseout',function(){
            texts[index].style.display = 'none';
            spans[index].style.backgroundPositionX = '0'
        })
    })
    lis[3].onclick = move;
    window.addEventListener('scroll',xianshi);
    function xianshi(){
        let stop = document.documentElement.scrollTop || document.body.scrollTop;
        if(stop>500){
            lis[3].style.display = 'block'
        }else{
            lis[3].style.display = 'none'
        }
    }
    function move(){
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let move_time = parseInt(this.getAttribute('movetime'));
        let move_top = top/move_time;
        let time = setInterval(function(){
            scrollTo(0,top)
            top -= move_top;
            if(top<=0){
                clearInterval(time)
            }
        })
    }
}